<template>
  <div class="listContentBox ">
    <advancedQueryShrinkComponent ref="advancedQueryShrinkComponent" :labelLength="4" :queryData="queryData" @getQuery="getList" />
    <div class="listBox listBoxLayoutLRBox  rela" :class="layouLeft?'':'listBoxLayoutRBox'">
      <div class="listBoxLayoutL floatLeft" :class="layouLeft?' p-px-l-24   p-px-r-24 p-px-t-16 p-px-b-16':''">
        <div class="layoutBtn cursor-pointer" @click="layouLeft=!layouLeft"><i :class="layouLeft?'el-icon-arrow-left':'el-icon-arrow-right'"></i></div>
        <div v-if="layouLeft">
          <el-input
            v-model.trim="deptName"
            placeholder="请输入部门名称"
            clearable
            prefix-icon="el-icon-search"
            style="margin-bottom: 10px"
            @input="deptNameFun"
            @clear="getDeptTreeselect"
          />
          <el-tree
            ref="tree"
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            :highlight-current="true"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </div>
      <div class="listBoxLayoutR floatRight  p-px-l-24   p-px-r-24 p-px-t-16 p-px-b-16">
        <el-row class="listBoxbtn m-px-b-16">
          <el-col :span="24">
            <el-button type="primary" @click="handleDialog('add','新增','')">新增</el-button>
          </el-col>
        </el-row>
        <div class="listBoxTable">
          <el-table v-loading="listLoading" height="100%" :data="list">
            <el-table-column label="序号" type="index" width="80" align="center" fixed="left">
              <template slot-scope="scope">
                <span>{{ pageIndex(scope.$index, queryData.queryParams) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="userName" label="用户名称" show-overflow-tooltip width="170" />
            <el-table-column prop="nickName" label="真实姓名" show-overflow-tooltip width="170" />
            <el-table-column prop="deptName" label="部门" show-overflow-tooltip width="260" />
            <el-table-column prop="roleNames" label="角色" show-overflow-tooltip min-width="300" />
            <el-table-column prop="phoneNumber" label="手机号码" show-overflow-tooltip width="160" />
            <el-table-column prop="orderNum" label="排序" show-overflow-tooltip width="100" />
            <el-table-column prop="statusLabel" label="状态" show-overflow-tooltip width="100" />
            <el-table-column label="操作" align="center" fixed="right" width="220">
              <template slot-scope="scope">
                <el-button type="text" @click="handleDialog('edit','修改',scope.row)">修改</el-button>
                <el-button type="text" typeC="danger" @click="handleDelete(scope.row)">删除</el-button>
                <el-button type="text" typeC="warning" @click="handleResetPwd(scope.row)">重置密码</el-button>
              </template>
            </el-table-column>
            <!-- 列表缺省 -->
            <div slot="empty" class="zjm_no_data_table_list height-100 flex row-center col-center">
              <el-empty :image-size="70" description="暂无数据"></el-empty>
            </div>
          </el-table>
        </div>
        <pagination :total="listTotal" :page.sync="queryData.queryParams.pageNum" :limit.sync="queryData.queryParams.pageSize" @pagination="getList" />
      </div>

    </div>
    <dialogForm ref="dialogForm" />
  </div>
</template>

<script>
// 混入
import { listMixins } from '@/mixins/publicMixins/listMixins'
// 组件
import advancedQueryShrinkComponent from '@/components/publicComponents/advancedQuery/indexShrink'
import dialogForm from './dialogForm'
// ---------------------------------------------------------------------------------------
export default {
  name: 'User',
  mixins: [listMixins],
  components: { advancedQueryShrinkComponent, dialogForm },
  provide() {
    return {
      listQueryParams: this
    }
  },
  data() {
    return {
      layouLeft: true,
      // 查询条件+查询组
      queryData: {
        queryParams: {
          pageNum: 1, // 分页的初始值
          pageSize: 10 // 每页的显示数
        },
        data: [
          {
            label: '用户名称', // 前端展示的label
            type: 'input', // 格式：input/select/date/money/number
            value: null, // 查询回填值
            valueKey: 'userName' // 查询入参Key
          },

          {
            label: '手机号', // 前端展示的label
            type: 'input', // 格式：input/select/date/money/number
            value: null, // 查询回填值
            valueKey: 'phoneNumber' // 查询入参Key
          },
          {
            label: '状态', // 前端展示的label
            type: 'select', // 格式：select
            value: null, // 查询回填值
            valueKey: 'status', // 查询入参Key
            typeData: [], // select类储存options
            dataType: 'dicts', // 获取储存options的类型  数据字典：dicts，其他接口获取：url
            getDicts: 'sys_normal_disable', // 数据字典类型值
            multiple: false// 是不是多选
          },
          {
            label: '真实姓名', // 前端展示的label
            type: 'input', // 格式：input/select/date/money/number
            value: null, // 查询回填值
            valueKey: 'nickName' // 查询入参Key
          }
        ]
      },
      // 左侧部分---------start---------
      deptName: null,
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      // 左侧部分---------end-----------
      initPassword: undefined//  默认密码
    }
  },
  created() {
    this.getDeptTreeselect()// 查询部门下拉树结构
    this.getConfigKey('sys.user.initPassword').then((response) => {
      this.initPassword = response.msg
    })
  },
  methods: {
    getDeptTreeselect(data) {
      this.getTreeSelectMixins('deptOptions', '/system/dept/treeselect')
    },
    /**
     * @description: 部门条件搜索
     * @Author: baoxuhui
     * @return {*}
     */
    deptNameFun() {
      const data = {
        deptName: this.deptName
      }
      this.getDeptTreeselect(data)
    },
    /**
     * @description: 筛选节点
     * @Author: baoxuhui
     * @param {*} value
     * @param {*} data
     * @return {*}
     */
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    /**
     * @description: 节点单击事件
     * @Author: baoxuhui
     * @param {*} data
     * @return {*}
     */
    handleNodeClick(data) {
      this.$refs['advancedQueryShrinkComponent'].handleQueryFun({ deptId: data.id })
    },
    /**
     * @description: 重置密码按钮操作
     * @Author: baoxuhui
     * @param {*} row
     * @return {*}
     */
    handleResetPwd(row) {
      const text = '重置密码'
      const data = {
        userId: row.userId,
        password: this.initPassword
      }
      this.handleConfirmMixins('/system/user/resetPwd', data, text)
    },
    /**
    * @description: 列表
    * @Author: baoxuhui
    * @param {*} queryParams
    * @return {*}
    */
    getList(queryParams) {
      this.getListMixins('/system/user/list', queryParams)
    },

    /**
    * @description: 清除额外的查询条件
    * @Author: baoxuhui
    * @param {*} queryParams
    * @return {*}
    */
    resetOtherQueryParams() {
      this.getDeptTreeselect()
    },
    /**
    * @description: 删除
    * @Author: baoxuhui
    * @param {*} row
    * @return {*}
    */
    handleDelete(row) {
      const url = '/system/user/removeById/' + row.userId
      this.handleDeleteMixins(url)
    },
    /**
     * @description: 打开弹窗
     * @Author: baoxuhui
     * @param {*} type//弹窗状态，add:'新增'，edit:修改，view:'详情'
     * @param {*} typeName//弹窗title '新增'，修改，'详情'
     * @param {*} row//参row
     * @return {*}
     */
    handleDialog(type, typeName, row) {
      this.$refs['dialogForm'].dialogResetForm()
      this.$refs['dialogForm'].dialogFormVisibleBool = true
      this.$refs['dialogForm'].dialogFormType = type
      this.$refs['dialogForm'].dialogFormTitle = typeName
      this.$refs['dialogForm'].dialogForm.password = this.initPassword

      if (type === 'edit') {
        this.$refs['dialogForm'].dialogDetailApi(row)
      }
    }
  }
}
</script>
